import React from "react";
import { Outlet, useNavigate } from "react-router-dom";

/*
    目标：
        使用 代码的方式，进行手动跳转

        关键点：
            useNavigate

        编程式导航
            1. 引入useNavigate
            2. 调用useNavigate方法得到一个函数
            3. 调用上一步得到的函数来跳转
*/
export default function App3() {
  //使用useNavigate 这个hook 进行跳转
  const navigate = useNavigate();
  const toHome = () => {
    // console.log("toHome");
    // 跳转到Home
    // navigate('路径')
    // navigate("/app/home");
    // 两个写法都行。
    navigate("home");
  };
  return (
    <div>
      <button onClick={toHome}>Home</button>
      <Outlet />
    </div>
  );
}
